<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0,shrink-to-fit=no, viewport-fit=cover">
    <meta name="keywords" content="蓝桥到家">
    <meta name="description" itemprop="description" content="生鲜副食、饮品乳品、鲜花蛋糕">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>购物车</title>
    <link rel="stylesheet" type="text/css" href="../styles/reset.css" />
    <link rel="stylesheet" type="text/css" href="../styles/iconfont/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="../styles/shop.css" />
    <link rel="stylesheet" type="text/css" href="../styles/shopcart.css" />
    <link rel="stylesheet" type="text/css" href="../styles/common.css" />
    <script type="text/javascript" src="../js/common.js"></script>
    <script type="text/javascript" src="../js/zepto.min.js"></script>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        window.onload = function () {
            const {createApp, ref} = Vue
            createApp({
                setup() {
                    const shopCarList = ref([])

                    // 2. 获取数据后初始化count（确保每个商品有数量属性）
                    let getData = () => {
                        fetch(`http://localhost:3000/shopCar`)
                            .then(response => response.json())
                            .then(data => {
                                shopCarList.value = data[0]
                            })
                            .catch(err => console.error('获取数据失败:', err));
                    }
                    getData()

                    let newData = (id,newCount,orderID) =>{
                        // console.log(shopCarList.value.shopCarGoods[id-1].count)
                        shopCarList.value.shopCarGoods[id-1].count=newCount
                        fetch(`http://localhost:3000/shopCar/${orderID}`,{
                            method:"PUT",
                            headers:{
                                'Content-Type': 'application/json'
                            },
                            body:JSON.stringify(shopCarList.value)
                        })
                    }

                    let reduce = (index,orderID) =>{
                        if (shopCarList.value.shopCarGoods[index-1].count>0) {
                            shopCarList.value.shopCarGoods[index-1].count--;
                            newData(index,shopCarList.value.shopCarGoods[index-1].count,orderID)
                        }
                    }

                    let add =(index,orderID) =>{
                        shopCarList.value.shopCarGoods[index-1].count++;
                        newData(index,shopCarList.value.shopCarGoods[index-1].count,orderID)
                    }

                    let goToOrderConfirm = () =>{
                        window.location.href="order-confirm.html"
                    }

                    return {shopCarList,reduce,goToOrderConfirm,add}
                }
            }).mount('#app')
        }
    </script>
</head>

<body>
<div class="wrap" id="app">
    <!-- 头部 start -->
    <header class="header_bar">
        <a href="../index.html">
            <div class="header_bar_back"></div>
        </a>
        <div class="header_bar_title">我的购物车</div>
    </header>
    <!-- 头部 end -->
    <div class="container">
        <!-- tab end -->
        <div class="bd">
            <!--全部订单-->
            <ul>
                <li>
                    <div class="order-no"><a href="./shop.html">永辉超市-搜秀城店</a>
                    </div>
                    <div class="order-detail">
                        <div class="menu_list">
                            <dl>
                                <dd class="good_item" v-for="(item, index) in shopCarList.shopCarGoods" :key="index">
                                    <img :src="item.imgUrl" alt="">
                                    <section class="info">
                                        <p class="name">{{ item.names }}</p>
                                        <p class="desc">饭后解腻佳品</p>
                                        <p class="sale">
                                            <span>月售{{ item.sales }}</span>
                                            <span>好评率{{ item.rate }}</span>
                                        </p>
                                        <div class="more">
                                            <div class="price">
                                                <span>￥</span> {{ item.price }}
                                            </div>
                                            <div class="action">
                                                <span class="iconfont icon-jian" @click="reduce(item.id,shopCarList.id)"></span>
                                                <span class="num" id="num1">{{ item.count }}</span>
                                                <span class="iconfont icon-jia" @click="add(item.id,shopCarList.id)"></span>
                                            </div>
                                        </div>
                                    </section>
                                </dd>
                            </dl>
                        </div>
                    </div>
                    <div class="">
                        <button class="account" @click="goToOrderConfirm">去结算</button>
                    </div>
                </li>
            </ul>

        </div>

    </div>
</div>
</body>

</html>